<template>
    <div class="container">
        <div class="inner">
            <div class="title">
                <span>待办事项清单</span>
            </div>
            <div class="search">
                <Search />
            </div>
            <div class="List">
                <List :todo-list="todoList" />
            </div>
            <div class="bottom">
                <Bottom />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted,nextTick } from 'vue'
import List from './List.vue'
import Search from './Search.vue'
import Bottom from './Bottom.vue'

import { getTodos } from '../request/api'
import $bus from '../utils/bus'
let data = reactive({
    // todoList: [
    //     {id:'001', title:'吃饭', iscomplete: false},
    //     {id:'002', title:'睡觉', iscomplete: false},
    //     {id:'003', title:'打豆豆', iscomplete: false},
    //     {id:'004', title:'游戏', iscomplete: true},
    // ] 
    todoList: []
})
onMounted(()=>{
    gettodoList()
    $bus.on('fetchtodoList', gettodoList)
})
const gettodoList = async () => {
    let res = await getTodos();
    data.todoList = res.data.todoList
}
let { todoList } = toRefs(data)
</script>

<style scoped>
    .container {
        background: #181744;
        min-height: 500px;
        border-radius: 10px;
        width: 400px;
        margin: 20px auto;
    }
    .inner {
        width: 80%;
        margin:  0 auto;
    }
    .title {
        color: white;
        font-size: 20px;
        line-height: 40px;
        text-align: center;
    }
    .List {
        min-height: 400px;
    }
</style>